<template>
	<div class="mainlist" >
		<!--广告位-->
		<div class="lss" v-for="item in newNews">
			<section class="action" v-if="item.large_mode">
				<a href="javascript:void(0)" >
				    <h3>{{item.title}} </h3>
				    <div class="action_img">
				        <img src="~@/assets/img/loading.png" >
				        <img v-lazy="item.large_image_url" />
				    </div>
				    <div class="item_info">
				        <p v-if="item.label" :class="{blue:item.label=='广告',red:item.label=='置顶'}">{{item.label}}</p>
						<p v-if="item.hot==1" class="red">热</p>
				        <span class="srr">{{item.source}}</span>
				        <span class="srr">评论{{item.label_style}}</span>
				        <span class="srr">3小时前</span>
				    </div>
				</a>
			</section>
			<!--三个小图-->
			<section class="threephoto" v-else-if="item.image_list.length==3">
				<a href="javascript: void(0)" >
					<div class="item_detail">
						<h3>{{item.title}}</h3>
						<div class="list_image">
							<ul class="clearfix" v-for="src in (item.image_list)">
								<li><img :src="src.url"></li>
							</ul>
						</div>
						<div class="item_info">
							<p v-if="item.label" :class="{blue:item.label=='广告',red:item.label=='置顶'}">{{item.label}}</p>
							<p v-if="item.hot==1" class="red">热</p>
							<span class="srr">{{item.source}}</span>
							<span class="srr">评论 {{item.comment_count}}</span>
							<span class="srr">9分钟前</span>
						</div>
					</div>
				</a>
			</section>
			<!--左边图-->
			<section class="left" v-else-if="item.image_url">
				<a href="javascript:void(0)">
					<div class="list_text">
						<h3>{{item.title}}</h3>
						<div class="item_info">
							<p v-if="item.label" :class="{blue:item.label=='广告',red:item.label=='置顶'}">{{item.label}}</p>
							<p v-if="item.hot==1" class="red">热</p>							
							<span class="srr">{{item.source}}</span>
							<span class="srr">评论{{item.comment_count}}</span>
						</div>
					</div>
					<div class="list_img">
						<img src="~@/assets/img/loading.png" >
				        <img v-lazy="item.image_url" />
					</div>
				</a>
			</section>
			<!--无图-->
			<section class="nophoto" v-else-if="item.image_list==[]">
				<a href="javascript: void(0)" class="article_link clearfix ">
					<div class="item_detail">
						<h3>{{item.title}}</h3>
						<div class="item_info">
							<p v-if="item.label" :class="{blue:item.label=='广告',red:item.label=='置顶'}">{{item.label}}</p>
							<p v-if="item.hot==1" class="red">热</p>
							<span class="srr">专题</span>
							<span class="srr">评论 {{item.comment_count}}</span>
							<span class="srr">2分钟前</span>
						</div>
					</div>
				</a>
			</section>
		</div>
		<totop></totop>
	    
	</div>
</template>

<script>
	import CONFIG from "@/config";
	import axios from 'axios';
	import totop from "@/components/totop";
	
    let n=1;
    let isadd=true;
	export default {
		mounted() {
			this._getNews(),
			this._ShowList(),
			window.addEventListener("scroll",this.jianting)
		},
		data() {
			return {
				newNews: [],     //总数据长度
				showList:[]      //显示的数据
			}
		},
		methods: {
			jianting(){
				if(!isadd){return};
				isadd=false;
				setTimeout(()=>{
	//              1.总高度
	                var offsetHeight= document.body.offsetHeight||document.documentElement.offsetHeight;
	//              2.当前高度
	                var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
	                var dis=((offsetHeight-scrollTop)/offsetHeight)*10|0;
	                isadd=true;
					if(dis<=3&&n<2){
						n++;
						this._ShowList()
					}	
				},500)
			},
			_ShowList(){
				axios({
					method:'get',
					url:"/toutiao1",
					params:{
						"rid":2
					}
				}).then((res) => {
					console.log(res.data.data.length)
					for(var i=0;i<res.data.data.length;i++){
						this.newNews.push(res.data.data[i])
					}
				})
			},
			_getNews() { //`_`表示私有方法
				axios({
					method:'get',
					url:"/toutiao1",
					params:{
						"rid":1
					}
				}).then((res) => {
					console.log(res)
					this.newNews = res.data.data
				})
			}
		},
		components: {
			totop
		},
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/scss/tuijian";
	
</style>